<template>
  <view class="detail-container">
    <!-- 顶部人物头像和姓名 -->
    <view class="header">
      <view class="circular-portrait">
        <image :src="url('p', giant.avatar, 'png')" mode="aspectFill"></image>
      </view>
      <view class="name">{{ giant.name }}</view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 人物生平 -->
      <view class="section biography">
        <view class="section-label">
          <text>人物生平</text>
        </view>
        <view class="section-content">
          {{ giant.description }}
        </view>
      </view>

      <!-- 主要成就 -->
      <view class="section achievements">
        <view class="section-label">
          <text>主要成就</text>
        </view>
        <view class="section-content achievements-list">
          <view class="achievement-row" v-for="(achievement, index) in giant.achievements" :key="index">
            <image :src="achievementImages[index] || defaultImage" mode="aspectFit" class="achievement-image"></image>
            <text class="achievement-text">{{ achievement }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加音频播放器 -->
    <view class="audio-player">
      <view class="player-controls" @tap="togglePlayback">
        <text class="play-icon" v-if="!isPlaying">▶</text>
        <text class="pause-icon" v-else>❚❚</text>
      </view>
      <view class="player-info">
        <text>{{ giant.name }}生平介绍</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const url = $url;
const defaultImage = '/static/default-achievement.png';

// 获取路由参数
const id = ref(0);
const giant = ref({});

// 成就图片（示例）
const achievementImages = ref([
  '/static/achievements/achievement1.png',
  '/static/achievements/achievement2.png',
  '/static/achievements/achievement3.png',
  '/static/achievements/achievement4.png'
]);

// 大家数据
const giantsList = [
  {
    name: '顾炎武',
    avatar: '0',
    years: '1613-1682',
    audio: 'gyw',
    title: '明末清初著名思想家',
    description: '顾炎武（1613年－1682年），江苏昆山人，明末清初著名思想家、经学家、史学家和音韵学家。他出身没落官僚家庭，自幼好学，博览群书。明亡后，他积极参与抗清活动，失败后游历北方，考察地理，访求古籍，潜心学术研究。顾炎武主张"经世致用"，反对空谈，著有《日知录》《音学五书》等，对后世学术影响深远。1682年病逝于山西曲沃。',
    achievements: [
      '《画呈王山史先生》',
      '顾炎武书法',
      '《日知录》',
      '《音学五书》'
    ]
  },
  {
    name: '宋应星',
    avatar: '1',
    years: '1587-1666',
    audio: 'syx',   
    title: '明代著名科学家',
    description: '宋应星（1587年—约1666年），字长庚，江西奉新人，明代著名科学家、农学家和思想家。他自幼聪颖，早年科举屡试不第，后转向实学，游历各地考察民生工艺，晚年隐居著述。其代表作《天工开物》系统总结了明末农业、手工业技术，被誉为"中国17世纪的工艺百科全书"，另著有《论气》《谈天》等科学著作，展现了朴素的唯物主义思想，对后世科技发展影响深远。',
    achievements: [
      '《论气》中探讨物质运动规律',
      '《天工开物》',
      '《谈天》',
      '朴素唯物主义思想'
    ]
  },
  {
    name: '墨子',
    avatar: '2',
    years: '约前470-前391',
    audio: 'mz',
    title: '战国初期思想家',
    description: '墨子（约前470—前391），名翟，战国初期思想家、政治家，墨家学派创始人。出身平民，精通手工技艺，早年学儒后自创墨家，主张"兼爱""非攻""尚贤""节用"，反对战争与奢侈。他带领弟子奔走列国，以逻辑辩论和防御战术闻名，曾成功阻止楚国攻宋。墨家组织严密，崇尚实践，与儒家并称"显学"。其思想载于《墨子》，包含哲学、科学、军事等内容，对中国逻辑学与工程技术有重要贡献。',
    achievements: [
      '小孔成像实验',
      '杠杆原理',
      '兼爱非攻思想',
      '墨家逻辑学'
    ]
  },
  {
    name: '张衡',
    avatar: '3',
    years: '78-139',
    audio: 'zhy',
    title: '东汉著名科学家',
    description: '张衡（78年－139年），字平子，东汉著名科学家、文学家，南阳西鄂（今河南南阳）人。他精通天文、数学、机械制造，发明了世界最早的地动仪（候风地动仪）和浑天仪，提出"浑天说"，著有《灵宪》《算罔论》等科学著作；文学上以《二京赋》著称，擅长辞赋。曾任太史令，晚年任尚书，因病逝世。因其卓越贡献被后世尊为"科圣"，国际天文学联合会将月球背面一环形山命名为"张衡山"。',
    achievements: [
      '浑天仪',
      '候风地动仪',
      '浑天说',
      '《二京赋》'
    ]
  },
  {
    name: '韩愈',
    avatar: '4',
    years: '768-824',
    audio: 'hy',
    title: '唐代文学家',
    description: '韩愈（768—824），字退之，河南河阳人，自称"郡望昌黎"，世称"韩昌黎"，唐代文学家、思想家、政治家，古文运动领袖，"唐宋八大家"之首。他幼年丧父，刻苦求学，贞元八年（792）进士及第，历任监察御史、国子博士、刑部侍郎等职，因谏迎佛骨被贬潮州刺史，后召回任兵部侍郎、吏部侍郎。他倡导"文以载道"，反对骈文，复兴秦汉散文传统，代表作有《师说》《原道》《马说》等，其思想对宋代儒学复兴影响深远，卒谥"文"，故称"韩文公"。',
    achievements: [
      '《原道》',
      '《谏迎佛骨表》',
      '《师说》',
      '古文运动'
    ]
  },
  {
    name: '李淳风',
    avatar: '5',
    years: '602-670',
    audio: 'lcx',
    title: '唐代著名天文学家',
    description: '李淳风（602－670），唐代著名天文学家、数学家、易学家，岐州雍县（今陕西凤翔）人，精通天文历算，参与修订《麟德历》，改进浑天仪，著《乙巳占》奠定古代气象学基础，与袁天罡合著《推背图》闻名后世，官至太史令，是中国古代科技史上的重要人物。',
    achievements: [
      '惯性运动',
      '风力定级',
      '《麟德历》',
      '《乙巳占》'
    ]
  },
  {
    name: '沈括',
    avatar: '6',
    years: '1031-1095',
    audio: 'sc',
    title: '北宋著名科学家',
    description: '沈括（1031—1095），字存中，号梦溪丈人，北宋著名科学家、政治家。他博学多才，在天文、数学、地理、物理、化学、医学等领域均有卓越贡献，代表作《梦溪笔谈》被誉为"中国科学史上的里程碑"。他参与王安石变法，历任提举司天监、翰林学士等职，晚年退居润州梦溪园潜心著述。其科学成就领先时代，如发现地磁偏角、提出"石油"命名等，展现了宋代科技的高度。',
    achievements: [
      '地磁偏角发现',
      '共振现象',
      '《梦溪笔谈》',
      '石油命名'
    ]
  },
  {
    name: '徐光启',
    avatar: '7',
    years: '1562-1633',
    audio: 'xgq',
    title: '明代著名科学家',
    description: '徐光启（1562—1633），明代著名科学家、农学家、政治家，字子先，号玄扈，上海人。他早年科举入仕，官至礼部尚书兼文渊阁大学士，晚年致力于科学研究，与意大利传教士利玛窦合作翻译《几何原本》，引入西方数学知识，并编撰《农政全书》系统总结中国农业技术，推动中西文化交流，被誉为"中国近代科学先驱"。',
    achievements: [
      '引入欧几里得几何学',
      '《农政全书》',
      '中西文化交流',
      '《崇祯历书》'
    ]
  }
];

// 添加音频相关变量
const audioContext = ref(null);
const isPlaying = ref(false);

// 初始化音频播放器
const initAudioContext = () => {
  try {
    // 创建音频上下文
    audioContext.value = uni.createInnerAudioContext();
    
    // 设置音频源
    const audioUrl = `https://mp-d7d620be-76ea-43bb-a05a-d38ceb13c655.cdn.bspapp.com/audio/physicist/${giant.value.audio}.MP3`;
    
    // 直接设置音频源
    audioContext.value.src = audioUrl;
    
    // 监听播放完成事件
    audioContext.value.onEnded(() => {
      isPlaying.value = false;
    });
    
    // 监听错误事件
    audioContext.value.onError((res) => {
      console.error('音频播放错误:', res.errMsg);
      isPlaying.value = false;
      
      // 根据错误类型显示不同提示
      if (res.errCode === 10002) {
        uni.showToast({
          title: '音频资源不存在',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '播放出错，请稍后重试',
          icon: 'none'
        });
      }
    });
    
    // 监听加载成功事件
    audioContext.value.onCanplay(() => {
      console.log('音频加载成功，可以播放');
    });
    
  } catch (error) {
    console.error('初始化音频播放器失败:', error);
    uni.showToast({
      title: '音频播放器初始化失败',
      icon: 'none'
    });
  }
};

// 切换播放状态
const togglePlayback = () => {
  try {
    if (!audioContext.value || !audioContext.value.src) {
      uni.showToast({
        title: '暂无音频资源',
        icon: 'none'
      });
      return;
    }
    
    if (isPlaying.value) {
      audioContext.value.pause();
      isPlaying.value = false;
    } else {
      // 播放前添加加载提示
      uni.showLoading({
        title: '加载中...'
      });
      
      audioContext.value.play();
      
      // 监听一次播放开始事件
      audioContext.value.onPlay(() => {
        uni.hideLoading();
        isPlaying.value = true;
      });
      
      // 设置超时处理
      setTimeout(() => {
        if (!isPlaying.value) {
          uni.hideLoading();
          uni.showToast({
            title: '播放超时，请重试',
            icon: 'none'
          });
        }
      }, 5000);
    }
  } catch (error) {
    console.error('切换播放状态失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    });
  }
};

onMounted(() => {
  // 获取路由参数中的ID
  const page = getCurrentPages();
  const currentPage = page[page.length - 1];
  const options = currentPage.$page?.options;
  
  if (options && options.id !== undefined) {
    id.value = parseInt(options.id);
    // 根据ID获取对应大家信息
    giant.value = giantsList[id.value];
  } else {
    // 默认显示第一位大家
    giant.value = giantsList[0];
  }
  
  // 初始化音频播放器
  initAudioContext();
});

// 在组件卸载时清理音频资源
onUnmounted(() => {
  if (audioContext.value) {
    audioContext.value.destroy();
  }
});
</script>

<style lang="scss" scoped>
.detail-container {  background: url(https://epoch.jxksd.top/mo/images/dbg.png) no-repeat top
  center/cover;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;

}

.circular-portrait {
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 8rpx solid #c0b299;
  background-color: #c0b299;
  margin-bottom: 20rpx;
  
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.name {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.content {
  flex: 1;
  padding: 20rpx 30rpx;
}

.section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-label {
  height: 70rpx;
  padding: 0 30rpx;
  background-color: #bba78d;
  display: flex;
  align-items: center;
  
  text {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
}

.section-content {
  padding: 30rpx;
}

.biography .section-content {
  font-size: 28rpx;
  line-height: 1.7;
  color: #333;
  text-align: justify;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.achievement-row {
  display: flex;
  align-items: center;
  padding: 15rpx;
  border-radius: 8rpx;
  background-color: #f9f7f2;
  border: 1px solid #e5dfd1;
}

.achievement-image {
  width: 180rpx;
  height: 100rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.achievement-text {
  font-size: 28rpx;
  color: #333;
}

.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
}

.player-controls {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--td-brand-color);
  color: #fff;
  font-size: 36rpx;
  margin-right: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.player-info {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.play-icon, .pause-icon {
  line-height: 1;
}

// 调整主容器底部间距，为音频播放器留出空间
.detail-container {
  padding-bottom: 120rpx;
}
</style> 